<template>
  <div class="px-md">
    <div class="text-center py-md text-md">登录注册</div>
    <component
      :is="currentLoginType"
      :loading="loading"
      @submit="onSubmit"
      @toggle="onToggleLogin"
    />
    <van-divider class="py-3x">其它登录方式</van-divider>
    <van-row class="text-center text-gray-400 text" type="flex" justify="center" gutter="40">
      <van-col span="6">
        <svg-icon icon-class="qq" color="#12b7f5" class="inline-block mb-sm icon-size" />
        <p>QQ 登录</p>
      </van-col>
      <van-col span="6">
        <svg-icon icon-class="wechat" color="#07c160" class="inline-block mb-sm icon-size" />
        <p>微信登录</p>
      </van-col>
      <van-col span="6">
        <svg-icon
          icon-class="dingding"
          color="rgb(54,152, 251)"
          class="inline-block mb-sm icon-size"
        />
        <p>钉钉登录</p>
      </van-col>
    </van-row>
    <p class="text-center text-gray-400 pt-2x">
      登录即代表你已同意用户<span class="text-blue-500"> 隐私政策</span>
    </p>
  </div>
</template>
<script>
import { debounce } from 'lodash-es';
import AccountLogin from './components/AccountLogin.vue';
import MobileLogin from './components/MobileLogin.vue';

export default {
  name: 'Login',
  components: {
    AccountLogin,
    MobileLogin
  },
  data() {
    return {
      loading: false,
      redirect: undefined,
      loginType: 'Account'
    };
  },
  computed: {
    currentLoginType() {
      return `${this.loginType}Login`;
    }
  },
  watch: {
    $route: {
      handler(route) {
        this.redirect = route.query && route.query.redirect;
      },
      immediate: true
    }
  },
  created() {
    this.debouncedOnSubmit = debounce(this.onSubmit, 300);
  },
  beforeDestroy() {
    this.debouncedOnSubmit.cancel();
    this.debouncedOnSubmit = null;
  },
  methods: {
    onSubmit(form) {
      this.loading = true;
      this.$store
        .dispatch('user/login', {
          ...form,
          loginType: this.loginType.toLowerCase()
        })
        .then(() => {
          this.$router.push({ path: this.redirect || '/' });
        })
        .finally(() => {
          setTimeout(() => {
            this.loading = false;
          }, 2222);
        });
    },
    onToggleLogin(type) {
      this.loginType = type;
    }
  }
};
</script>
